<template>
    <div class="material-content">
        <div class="material-parent" v-for="(item,index) in componentArr" :key="item.id">
            <div class="title">
                <div class="title-left"></div>
                <div class="title-right">{{item.componentTitle}}</div>
            </div>
            <div class="componentList" v-draggable="[item.children,options]">
                <div 
                class="componentList-items" 
                v-for="tip in item.children" 
                :key="tip.id" 
                >
                    <div class="component-content" >
                        <img class="component-img" src="" alt="" >
                        <span class="component-text">{{ tip.name }}</span>
                    </div>
                    
                    
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { vDraggable,DraggableEvent } from 'vue-draggable-plus'
    import getDSL from '@/protocol'
    import {ref,reactive, onMounted} from 'vue'
    //子组件项类型
    interface ComponentItem{
        name:string,
        id:string,
        title:string
    }
    //组件分组类型
    interface ComponentGroup{
        componentTitle:string,
        id:string,
        group:string,
        children:ComponentItem[]
    }
    //组件树类型
    type ComponentTree=ComponentGroup[];

    const componentArr=ref<ComponentTree>([
        {componentTitle:'布局',id:'0',group:'Layout',children:[
            {name:'线性布局',id:'00',title:'Linelayout'},//普通的布局，元素都是div，多个div从上到下排列
            {name:'自由布局',id:'01',title:'Freelayout'},//一个大的div，组件可以在里面任意拖拽和排列
            {name:'栅格布局',id:'02',title:'Gridlayout'},//一行分成多栏，el-row/el-col
            {name:'分栏布局',id:'03',title:'Columnslayout'},//左右布局、左中右布局、左边固定，右边自适应布局
        ]},
        {componentTitle:'导航',id:'1',group:'Navigation',children:[
            {name:'面包屑',id:'10',title:'Breadcrumb'},
            {name:'侧边栏',id:'11',title:'Sidebar'},
            {name:'导航栏',id:'12',title:'Navigationbar'},
            {name:'下拉菜单',id:'13',title:'Dropdown'},
        ]},
        {componentTitle:'容器',id:'2',group:'Container',children:[
            {name:'子页面容器',id:'20',title:'Childcontainer'},
            {name:'Iframe',id:'21',title:'Iframe'},
            {name:'面板',id:'22',title:'Panel'},
            {name:'折叠面板',id:'23',title:'Collapse'},
            {name:'卡片',id:'24',title:'Card'},
        ]},
        {componentTitle:'展示',id:'3',group:'Display',children:[
            {name:'文本',id:'30',title:'Text'},
            {name:'链接',id:'31',title:'Link'},
            {name:'按钮',id:'32',title:'Button'},
            {name:'图标',id:'33',title:'Icon'},
            {name:'画廊',id:'34',title:'Gallery'},
            {name:'标签',id:'35',title:'Label'},
            {name:'徽章',id:'36',title:'Badge'},
            {name:'幻灯片',id:'37',title:'Carousel'},
            {name:'详情列表',id:'38',title:'Detail'},
            {name:'图片展示',id:'39',title:'Image'},
            {name:'公告',id:'391',title:'Notice'},
            {name:'计时器',id:'392',title:'Timer'},
            {name:'分隔线',id:'393',title:'Divider'},
            {name:'时间线',id:'394',title:'Timeline'},
        ]},
        {componentTitle:'表格',id:'4',group:'Table',children:[
            {name:'数据列表',id:'40',title:'Datatable'},
            {name:'日历',id:'41',title:'Calendar'},
        ]},
        {componentTitle:'表单',id:'5',group:'Form',children:[
            {name:'表单',id:'50',title:'Form'},
            {name:'单行输入',id:'51',title:'Singleinput'},
            {name:'数字输入',id:'52',title:'Numberinput'},
            {name:'多行输入',id:'53',title:'Mutilineinput'},
            {name:'单选组',id:'54',title:'Radiogroup'},
            {name:'开关',id:'55',title:'Switch'},
            {name:'多选组',id:'56',title:'Checkboxgroup'},
            {name:'评分',id:'57',title:'Rate'},
            {name:'滑块',id:'58',title:'Slider'},
            {name:'文件上传',id:'59',title:'Upload'},

        ]},
        {componentTitle:'选择器',id:'6',group:'Selector',children:[
            {name:'选项卡',id:'60',title:'Tabs'},
            {name:'步骤条',id:'61',title:'Steps'},
            {name:'翻页器',id:'62',title:'Pagination'},
            {name:'选择器',id:'63',title:'Selector'},
            {name:'级联选择',id:'64',title:'Cascader'},
            {name:'地区选择',id:'65',title:'Areaselect'},
            // {name:'树形视图',id:'66',title:''},
            {name:'穿梭框',id:'67',title:'Transfer'},
            {name:'日期选择',id:'68',title:'Datepicker'},
            // {name:'时间选择',id:'69',title:'Datetimepicker'},
            {name:'日期时间选择',id:'691',title:'Datetimepicker'},
            {name:'树选择',id:'692',title:'Treeselect'},
        ]},
        {componentTitle:'图表',id:'7',group:'Chart',children:[
            {name:'线性进度条',id:'70',title:'Progress'},
            {name:'圆形进度条',id:'71',title:'Circleprogress'},
        ]},
        {componentTitle:'反馈',id:'8',group:'Feedback',children:[
            {name:'弹出框',id:'80',title:'Messagebox'},
            {name:'弹窗',id:'81',title:'Dialog'},
            {name:'抽屉',id:'82',title:'Drawer'},
            {name:'弹出消息',id:'83',title:'Message'},
        ]},
    ])
    onMounted(()=>{
        // console.log('初始化');

    })
    //获取组件的DSL
    function componentClick(item:ComponentItem){
        // console.log('item',item)
        const component_DSL=getDSL(item.title)
        // console.log(item.title+'-DSL',component_DSL)
        return component_DSL;
    }

    /**
     * vue-draggable-plus：
     * 必须使用灵活的指令模式来进行拖拽，否则通过组件方式会导致页面出现template标签，然后被渲染成div，导致页面布局混乱
     */
    const options = {
        animation: 150,
        group:{
            name: 'component',
            // 只允许克隆拖拽，不移动原元素
            pull: (to, from, element) => {
                return 'clone'; // 强制克隆模式
            },
            // 禁止任何元素拖入当前列表
            put: false
        },
        onStart(e:DraggableEvent) {
            console.log('拖拽开始',e.data)
        },
        onUpdate(e:DraggableEvent) {
            // 手动阻止内部排序导致的数组修改
            e.preventDefault();
            return false;
        },
        onEnd(e:DraggableEvent){
            console.log('拖拽结束material')
        },
        clone:(el:ComponentItem)=>{
            // console.log('el',el,componentClick(el))
            return componentClick(el)
        },
        // 阻止可能修改原列表的事件
        onMove: (e: DraggableEvent) => {
            // 阻止在当前列表内部的移动
            if (e.from === e.to) {
                return false;
            }
            return true;
        },
    }
    // console.log('options',options)
</script>
<style lang="scss" scoped>
    .material-content{
        width:100%;
        // height:100%;
        // border: 1px solid red;
        padding:10px;
        // overflow: auto;
        .material-parent{
            margin-bottom:5px;
            .title{
                // width:80%;
                height:50px;
                // margin:0 auto 15px;
                display:flex;
                justify-content: flex-start;
                align-items: center;
                .title-left{
                    width:3px;
                    height:15px;
                    background:#409eff;
                    border-radius: 2px;
                    margin-right:5px;
                }
                .title-right{
                    font-weight:700;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
            .componentList{
                padding:10px;
                display: grid;
                grid-template-columns: repeat(3,60px); //声明三列，列宽50px
                grid-template-rows: repeat(auto-fill,50px);//行数未知自动填充，且行高50px
                grid-column-gap:10px;//列间距
                grid-row-gap:10px;//行间距
                .componentList-items{
                    width:60px;
                    height:50px;
                    cursor: move; // 添加拖拽光标样式
                    // display: flex;
                    // flex-direction: column;
                    // justify-content: space-between;
                    // align-items: center;
                    // 修改：添加内容容器样式
                    .component-content{
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        height: 100%;
                    }
                    .component-img{
                        width:35px;
                        height:35px;
                    }
                    .component-text{
                        font-size:12px;
                    }
                }
            }
        }
    }
</style>